import React from 'react'
import { Text, StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'
import CustomImage from 'src/components/image/CustomImage'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'

const triangleArrowRight = require('src/imgC/home/triangle.png')
export default function CompleteTimes (props) {
  const {
    completeTimes
  } = props
  return (
    <View style={styles.titleCenterCompletedView}>
      <CustomImage
        style={styles.titleCenterCompletedImg}
        source={require('src/imgC/userinfo/icon_complete_num.png')}/>
      <Text style={styles.titleCenterCompletedText}>完成 {completeTimes} 次工作</Text>
      <CustomImage style={styles.titleCenterCompletedRightImg} source={triangleArrowRight}/>
    </View>
  )
}

CompleteTimes.propTypes = {
  completeTimes: PropTypes.number
}
CompleteTimes.defaultProps = {
  completeTimes: 0
}
const styles = StyleSheet.create({
  titleCenterCompletedView: {
    backgroundColor: 'white',
    borderRadius: (15),
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: ScaleS(12),
    paddingVertical: ScaleS(8),
    marginTop: ScaleS(8)
  },
  titleCenterCompletedImg: {
    width: ScaleS(20),
    height: ScaleS(20),
    marginRight: ScaleS(6)
  },
  titleCenterCompletedText: {
    color: '#444444',
    fontSize: ScaleT(13),
    fontWeight: '400'
  },
  titleCenterCompletedRightImg: {
    width: ScaleS(7),
    height: ScaleS(5),
    transform: [{ rotate: '-90deg' }],
    marginLeft: ScaleS(6)
  }
})
